<template>
  <div class="my-promulgator-mangae">
    <c-title text="技能管理"></c-title>
    <van-tabs v-model="active" color="#4978F8" title-active-color="#4978F8" @click="handle">
      <van-tab title="已上架" :name="1"></van-tab>
      <van-tab title="待审核" :name="0"></van-tab>
      <van-tab title="审核驳回" :name="-1"></van-tab>
    </van-tabs>
    <div class="list">
      <router-link tag="div" :to="fun.getUrl('anytimeSkillMasterRelease',{}, { id: item.id })" class="list-item" v-for="item in list" :key="item.id">
        <van-image width="6.8125rem" height="6.8125rem" style="border-radius: 0.25rem;overflow: hidden;"
          :src="item.pic_url" />
        <div class="item-right">
          <p class="title">{{item.title}}</p>
          <p class="content">{{item.has_one_category&&item.has_one_category.title}} | {{item.desc}}</p>
          <p class="sold">已售{{item.service_order_num}}</p>
          <div style="margin-top: 0.5625rem;color: #FF9C43">
            <span>{{ $i18n.t('money') }}</span><span class="fz32 fw-500">{{item.fee}}/次</span>
          </div>
        </div>
      </router-link>
    </div>

    <div class="btn" :class="{'isPcBtn': fun.isPc()}">
      <van-button block round color="#4978F8" @click="submit">技能发布</van-button>
    </div>
  </div>
</template>

<script>
import  {scrollMixin} from "../../../../../utils/mixin";
import { Image as VanImage } from 'vant';
export default {
  mixins:[scrollMixin],
  components: { VanImage },
  data() {
    return {
      active: 1,

      isLoadMore:true,
      page:1,
      last_page:1,
      list:[],

    };
  },
  activated(){
    this.isLoadMore = true;
    this.getData();
  },
  methods: {
    handle(){
      this.getData()
    },
    getMoreData(){
      this.isLoadMore = false;
      if (this.page >= this.last_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },
    getData(page=1){
      let json = {
        page,
        state:this.active
      }
      $http.get("plugin.be-within-call.frontend.shi-fu.ability",json,'').then(({result,msg,data})=>{
        this.isLoadMore = true;
        if(result){
          this.page = data.current_page;
          this.last_page = data.last_page;
          (page==1)?(this.list = data.data) :(this.list=this.list.concat(data.data));
        }else{
          this.$toast(msg);
        }
      })
    },
    submit() {
      this.$router.push(this.fun.getUrl('anytimeSkillMasterRelease'))
    }
  }
};
</script>

<style scoped lang="scss">
  .isPcBtn{
    width: 375px !important;
    left:50% !important;
    transform: translateX(-50%) !important;
  }

.my-promulgator-mangae {
  padding-bottom: 6.25rem;

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: .625rem .75rem;
  }

  .list-item {
    background: #fff;
    margin: .5rem 0;
    padding: .75rem;
    display: flex;
  }

  .item-right {
    margin-left: .375rem;
    flex: 1;
    padding-top: .4063rem;
    text-align: left;
  }

  .title {
    font-size: 0.9rem;
  }


  .fw-500 {
    font-weight: 500;
  }

  .content {
    color: #999999;
    font-size: .9rem;
    margin-top: .75rem;
    margin-bottom: .5rem;
  }

  .sold {
    color: #999999;
    font-size: .9rem;

  }

  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .fz32 {
    font-size: 1.1rem;
  }

  .time {
    background: #FFEEDF;
    color: #FF9C43;
    font-size: .75rem;
    padding: 0.3125rem 0.375rem;
  }
}</style>
